<template>
  <div class="mian">
    <div class="top-bar_o">
      <a href="javascript:;" @click.prevent="$router.go(-1)"
        ><van-icon name="arrow-left"
      /></a>
      <span>收支明细</span>
      <van-icon name="ellipsis" class="ellipsis" />
    </div>
    <!-- 我的个人账户 -->
    <div class="account">
      <div class="l">
        <img :src="iconUrl + $store.state.emailLogin[0].userImg" alt="" />
        <div class="infos">
          <p>{{ $store.state.emailLogin[0].Nickname }}</p>
          <span>{{ nowDate }}</span>
        </div>
      </div>
      <div class="r">
        <router-link :to="{ name: 'PersonalSettings' }">
          <span
            >个人中心
            <van-icon name="share" />
          </span>
        </router-link>
      </div>
    </div>
    <!-- 消费占比图表 -->
    <div class="consumption-percent">
      <div class="title">
        <h4>消费金额</h4>
        <span>(单位 元)</span>
      </div>
      <div v-if="chatlist.length != 0">
        <div class="chart" id="chart"></div>
      </div>
      <van-empty v-else description="暂无记录" />
    </div>
    <!-- 明细 -->
    <div class="detail">
      <div class="title">
        <h4>今天 {{ getWeekDay(new Date()) }}</h4>
        <span
          >收入￥{{ PirceInfo.Benefit }}，支出￥{{
            PirceInfo.Expenditure
          }}</span
        >
      </div>
      <div v-if="detalsList.length != 0" class="list">
        <vue-seamless-scroll
          :data="detalsList"
          class="seamless-warp"
          :class-option="classOption"
        >
          <ul>
            <li v-for="item in detalsList" :key="item.id">
              <div class="l">
                <img :src="item.typeIcon" alt="" />
                <div class="infos">
                  <p>{{ item.conType }}</p>
                  <span>{{
                    isDay2(item.time) == newTime
                      ? isDay3(item.time)
                      : isDay(item.time)
                  }}</span>
                </div>
              </div>
              <div class="r">
                <span v-if="item.Expenditure">-{{ item.Expenditure }}.00</span>
                <span v-if="item.Benefit">+{{ item.Benefit }}.00</span>

                <!-- <i>李</i> -->
              </div>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <van-empty v-else description="暂无记录" />
    </div>
    <!-- foot bar -->
    <div class="holder"></div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from "echarts";
export default {
  name: "ConsumerDetails",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      chart: null, // 图表
      data1: [
        // 数据
        { name: "餐饮", value: 23 },
        { name: "购物", value: 18 },
        { name: "日用", value: 26 },
        { name: "学习", value: 14 },
      ],
      data: [],
      increment: [],

      increment1: [
        // 增量
        { name: "手机数码", value: 5 },
        { name: "家用电器", value: 7 },
        { name: "家具厨具", value: -13 },
        { name: "家具家装", value: 8 },
      ],
      sumPrice: "",
      detalsList: [],
      PirceInfo: {
        Expenditure: "",
        Benefit: "",
      },
      animate: false,
      nowDate: "", //当前日期时间
      newTime: this.isDay2(new Date()),
      chatlist: [],
    };
  },
  created() {
    this.GetUserConsumption();
    this.GetconsumptionDetails();
    this.GetBenefitOrExpenses();
  },
  mounted() {
    this.currentTime();
    this.$nextTick(function () {
      this.initChart();
    });
    // window.onresize = function () {
    //   that.chart.resize();
    // };
  },
  activated() {
    this.GetconsumptionDetails();
  },
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
  computed: {
    classOption() {
      return {
        step: 0.6,
        limitMoveNum: 3,
        direction: 1, // 0向下 1向上 2向左 3向右
      };
    },
  },
  methods: {
    isDay(timeVal) {
      const dt = new Date(timeVal);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, 0);
      const hh = (dt.getHours() + "").padStart(2, 0);
      const mm = (dt.getMinutes() + "").padStart(2, 0);
      const ss = (dt.getSeconds() + "").padStart(2, 0);
      return `${y}-${m}-${d} ${hh}:${mm}`;
    },
    isDay2(timeVal) {
      const dt = new Date(timeVal);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, 0);
      const hh = (dt.getHours() + "").padStart(2, 0);
      const mm = (dt.getMinutes() + "").padStart(2, 0);
      const ss = (dt.getSeconds() + "").padStart(2, 0);
      return `${y}-${m}-${d}`;
    },
    isDay3(timeVal) {
      const dt = new Date(timeVal);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, 0);
      const hh = (dt.getHours() + "").padStart(2, 0);
      const mm = (dt.getMinutes() + "").padStart(2, 0);
      const ss = (dt.getSeconds() + "").padStart(2, 0);
      return `今天 ${hh}:${mm}`;
    },
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();

      let year = date.getFullYear(); // 年

      let month = date.getMonth() + 1; // 月

      let day = date.getDate(); // 日

      let week = date.getDay(); // 星期

      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];

      let hour = date.getHours(); // 时

      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零

      let minute = date.getMinutes(); // 分

      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零

      let second = date.getSeconds(); // 秒

      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零

      this.nowDate = `${hour}:${minute}:${second} ${weekArr[week]}`;
    },
    async GetBenefitOrExpenses() {
      try {
        const { data: res } = await this.$http.get("GetBenefitOrExpenses", {
          params: { id: this.$store.state.emailLogin[0].userID },
        });
        // console.log(res.data[0].Expenditure);
        this.PirceInfo.Expenditure = res.data[0].Expenditure;
        this.PirceInfo.Benefit = res.data[0].Benefit;
      } catch (error) {}
    },
    getWeekDay(date) {
      var week;
      if (date.getDay() == 0) week = "周日";
      if (date.getDay() == 1) week = "周一";
      if (date.getDay() == 2) week = "周二";
      if (date.getDay() == 3) week = "周三";
      if (date.getDay() == 4) week = "周四";
      if (date.getDay() == 5) week = "周五";
      if (date.getDay() == 6) week = "周六";
      return week;
    },
    async GetUserConsumption() {
      const { data: res } = await this.$http.get("GetUserTotal", {
        params: { id: this.$store.state.emailLogin[0].userID },
      });
      this.sumPrice = "￥" + res.data[0].sumPrice;
      //   console.log();
    },
    //获取消费明细
    async GetconsumptionDetails() {
      try {
        const { data: res } = await this.$http.get("consumptionDetails", {
          params: { id: this.$store.state.emailLogin[0].userID },
        });
        this.detalsList = res.data;
      } catch (error) {}
    },
    //图标
    async initChart() {
      try {
        const { data: res } = await this.$http.get("GetUserConsumption", {
          params: { id: this.$store.state.emailLogin[0].userID },
        });
        console.log(res);
        this.chatlist = res.data;
        console.log(this.chatlist);

        let arr = [];
        res.data.forEach((item) => {
          var obj = {};
          obj.name = item.name;
          obj.value = item.value;
          this.data.push(obj);
        });

        const { data: res1 } = await this.$http.get("GetUserTypePrice", {
          params: { id: this.$store.state.emailLogin[0].userID },
        });
        res1.data.forEach((item) => {
          var obj = {};
          obj.name = item.name;
          obj.value = item.value;
          this.increment.push(obj);
        });
        //   this.GetUserConsumption();
        var that = this;
        // 初始化图表
        this.chart = echarts.init(document.getElementById("chart"));

        // 配置项
        var chartOptions = {
          title: {
            text: this.sumPrice,
            subtext: "总支出",
            textStyle: {
              fontSize: 17,
              color: "#ffffff",
              lineHeight: 20,
            },
            subtextStyle: {
              fontSize: 12,
              color: "#ffffff",
            },
            textAlign: "center",
            left: "23%",
            top: "41%",
          },
          tooltip: {
            formatter: function (params) {
              return params.data.name + ":" + params.data.value + "%";
            },
          },
          legend: {
            type: "scroll",
            orient: "vertical",
            right: "0%",
            top: "center",
            itemGap: 15,
            selectedMode: false,
            itemWidth: 12,
            itemHeight: 12,
            icon: "diamond",
            textStyle: {
              color: "#77899c",
              fontSize: 12,
              rich: {
                a: {
                  color: "#0bf4fd",
                  width: 50,
                  align: "right",
                },
                b: {
                  color: "#fd5b80",
                  width: 50,
                  align: "right",
                },
              },
            },
            formatter: function (name) {
              if (that.getValue(that.increment, name) > 0) {
                return (
                  name +
                  " " +
                  that.getValue(that.data, name) +
                  "%" +
                  "  {a|" +
                  that.getValue(that.increment, name) +
                  "元}"
                );
              } else {
                return (
                  name +
                  " " +
                  that.getValue(that.data, name) +
                  "元" +
                  "  {b|" +
                  that.getValue(that.increment, name) +
                  "元}"
                );
              }
            },
          },
          color: ["#fecf4b", "#fe6a6c", "#4599fc", "#02c4a9 "],
          series: [
            {
              type: "pie",
              radius: ["55%", "85%"],
              center: ["25%", "55%"],
              label: {
                show: true,
                position: "inner",
                textStyle: {
                  color: "#fff",
                  fontSize: 10,
                },
                formatter(params) {
                  return params.data.value + "%";
                },
              },
              labelLine: {
                show: false,
              },
              data: this.data,
            },
          ],
        };
        // 填充配置
        this.chart.setOption(chartOptions);
      } catch (error) {}
    },
    getValue: function (array, key) {
      //   console.log(array, key);
      for (var i = 0; i < array.length; i++) {
        if (array[i].name == key) {
          return array[i].value;
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.mian {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  background: linear-gradient(to right, #2c324d, #3f4561);
  background-size: cover;
}
.top-bar_o {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: relative;
  font-size: 1rem;
  color: #fff;
  border-bottom: 0.01rem solid #474c65;
}
.top-bar_o a {
  color: white;
  position: absolute;
  left: 5px;
  font-size: 20px;
  line-height: 45px;
}
.top-bar_o .ellipsis {
  position: absolute;
  right: 10px;
  font-size: 24px;
  line-height: 40px;
}
/* 我的个人账户 */
.account {
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-between;
  padding: 13px;
}
.account .l {
  display: flex;
}
.account .l img {
  width: 40px;
  height: 40px;
}
.account .l .infos {
  margin: 2px;
  margin-left: 10px;
}
.account .l .infos p {
  color: white;
}
.account .l .infos span {
  color: white;
}
.account .r a {
  color: white;
}
.account .r i {
  top: 3px;
}
/* 消费占比图表 */
.consumption-percent {
  width: 21.94rem;
  margin: 0 auto;
  background: linear-gradient(to right, #42475f, #545a73);
  /* padding: 0.4rem 0.4rem; */
  border-radius: 0.65rem;
  margin-top: -0.6rem;
  padding: 12px;
}
.consumption-percent .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.consumption-percent .title h4 {
  font-size: 15px;
  color: #fff;
}
.consumption-percent .title span {
  color: #babcc6;
  font-size: 15px;
}
.consumption-percent .chart {
  width: 317px;
  height: 170px;
  left: 0px !important;
}
/* 明细 */
.detail {
  width: 21.94rem;
  margin: 0 auto;
  background: linear-gradient(to right, #42475f, #545a73);
  border-radius: 0.65rem;
  margin-top: 1.2rem;
  padding: 13px;
}
.detail .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail .title h4 {
  font-size: 15px;
  color: #fff;
}
.detail .title span {
  color: #babcc6;
  font-size: 0.2rem;
}
.detail .list {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 0.15rem;
  //   max-height: 225px;
  //   overflow-y: auto;
}
.detail .list ul {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.detail .list ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  position: relative;
}
.detail .list ul li::after {
  content: "";
  display: block;
  height: 0.01rem;
  width: 5.1rem;
  background: linear-gradient(to right, #535870, #5e6273);
  position: absolute;
  bottom: 0;
  right: 0;
}
.detail .list ul li:last-child:after {
  display: none;
}
.detail .list ul li .l {
  display: flex;
  align-items: center;
}
.detail .list ul li .l img {
  width: 40px;
  height: 40px;
}
.detail .list ul li .l .infos {
  display: flex;
  flex-direction: column;
  padding-left: 0.25rem;
}
.detail .list ul li .l .infos p {
  font-size: 1rem;
  color: #fff;
}
.detail .list ul li .l .infos p sup {
  display: inline-block;
  width: 0.34rem;
  height: 0.31rem;
  background: url(../../assets/icon/icon-pic.png) center center no-repeat;
  background-size: 100% 100%;
  margin-left: 0.2rem;
}
.detail .list ul li .l .infos span {
  font-size: 0.2rem;
  color: #ffffff;
  padding-top: 0.1rem;
}
.detail .list ul li .r {
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.detail .list ul li .r span {
  font-size: 1rem;
  color: #fff;
  padding-right: 0.25rem;
}
.detail .list ul li .r i {
  flex-shrink: 0;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  border-radius: 100%;
  font-size: 0.22rem;
  color: #fff;
  background: #9698a5;
}
/* 尾部导航 */
.anim {
  transition: all 0.5s;
}
.seamless-warp {
  height: 229px;
  overflow: hidden;
}
</style>